<template>
  <div class="security-config">
    <a-radio-group v-model="activeKey" type="button" class="ml-6 mt-6">
      <a-radio v-for="item in pages" :key="item.value" :value="item.value">
        {{ item.label }}
      </a-radio>
    </a-radio-group>
    <component :is="activeComponent" />
  </div>
</template>
<script lang="ts" setup>
import CustomRules from './custom-rules'
import RateLimit from './rate-limit'
import WhiteList from './white-list'
const activeKey = ref('customRules')
const pages = ref([
  {
    label: '自定义规则',
    value: 'customRules'
  },
  {
    label: '速率限制',
    value: 'rateLimit'
  },
  {
    label: '白名单',
    value: 'whiteList'
  }
])
const activeComponent = computed(() => {
  switch (activeKey?.value) {
    case 'customRules':
      return CustomRules
    case 'rateLimit':
      return RateLimit
    default:
      return WhiteList
  }
})

onMounted(async () => {
  await nextTick()
  const logModule = localStorage.getItem('logModule')
  if (logModule) {
    activeKey.value =
      logModule === '1'
        ? 'customRules'
        : (activeKey.value = logModule === '2' ? 'rateLimit' : 'whiteList')
    if (logModule === '1') {
      localStorage.setItem('logModule', '')
      localStorage.setItem('customRulesId', '')
    }
  }
})

onUnmounted(() => {})
</script>
<style lang="less" scoped>
.security-config {
  @apply bg-white  rounded-lg flex-1 overflow-hidden;
}
</style>
